<template>
    <div class="shopping-cart">
        <h1>购物车</h1>
        <div class="content">
            <!-- 商品列表部分 -->
            <div class="product-list">
                <h2>商品列表</h2>
                <!-- 遍历商品数组并渲染每个商品的信息 -->
                <div class="product" v-for="product in products" :key="product.id">
                    <h3>{{ product.name }}</h3>
                    <p>价格: {{ product.price }} 元</p>
                    <!-- 按钮，点击时触发添加商品到购物车的事件 -->
                    <button @click="addToCart(product)">添加到购物车</button>
                </div>
            </div>
            <!-- 购物车部分 -->
            <div class="cart">
                <h2>购物车</h2>
                <!-- 如果购物车为空，则显示提示信息 -->
                <div v-if="cartItems.length === 0">购物车为空</div>
                <!-- 遍历购物车中的商品并渲染每个商品的信息 -->
                <div class="cart-item" v-for="item in cartItems" :key="item.id">
                    <h3>{{ item.name }}</h3>
                    <p>数量: {{ item.quantity }}</p>
                    <p>价格: {{ item.price }} 元</p>
                    <!-- 按钮，点击时触发移除商品的事件 -->
                    <button @click="removeFromCart(item.id)">移除</button>
                </div>
            </div>
        </div>
        <!-- 购物车总金额部分 -->
        <div class="cart-total">
            <h2>总计</h2>
            <!-- 如果总金额大于 0，则显示总金额 -->
            <p v-if="total > 0">总金额: {{ total }} 元</p>
            <!-- 如果购物车为空，则提示用户 -->
            <p v-else>购物车为空，无法计算总金额</p>
        </div>
    </div>
</template>

<script setup>
// 引入 Vue 的 ref 和 computed 函数
import { ref, computed } from 'vue';

// 定义响应式的商品数组，包含多个商品对象
const products = ref([
    { id: 1, name: '商品 A', price: 100 }, // 商品 A
    { id: 2, name: '商品 B', price: 200 }, // 商品 B
    { id: 3, name: '商品 C', price: 300 }, // 商品 C
]);

// 定义响应式的购物车商品数组
const cartItems = ref([]);

// 添加商品到购物车的函数
const addToCart = (product) => {
    // 检查购物车中是否已存在该商品
    const existingItem = cartItems.value.find(item => item.id === product.id);
    if (existingItem) {
        // 如果存在，增加数量
        existingItem.quantity++;
    } else {
        // 如果不存在，添加新商品，数量设为 1
        cartItems.value.push({ ...product, quantity: 1 });
    }
};

// 从购物车中移除商品的函数
const removeFromCart = (itemId) => {
    // 过滤掉已移除的商品，更新购物车
    cartItems.value = cartItems.value.filter(item => item.id !== itemId);
};

// 计算总金额的响应式属性
const total = computed(() => {
    // 初始化总金额为 0
    let totalAmount = 0;
    // 遍历每个商品
    cartItems.value.forEach(item => {
        // 计算当前商品的总价
        const itemTotal = item.price * item.quantity;
        // 将当前商品的总价累加到总金额中
        totalAmount += itemTotal;
    });
    // 返回最终的总金额
    return totalAmount;
});
</script>

<style scoped>
/* 购物车的主要容器样式 */
.shopping-cart {
    max-width: 1200px; /* 最大宽度 */
    margin: auto; /* 居中对齐 */
    padding: 20px; /* 内边距 */
}

/* 标题样式 */
h1 {
    text-align: center; /* 标题居中 */
}

/* 内容区域样式 */
.content {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 组件之间的间距 */
    gap: 20px; /* 添加组件之间的间距 */
}

/* 商品列表和购物车的样式 */
.product-list,
.cart {
    flex: 1; /* 允许组件扩展 */
    min-width: 300px; /* 设置最小宽度 */
}

/* 商品项和购物车项的样式 */
.product,
.cart-item {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 每个商品项之间的间距 */
}

/* 总金额显示样式 */
.cart-total {
    font-weight: bold; /* 加粗字体 */
    text-align: center; /* 文本居中 */
    margin-top: 20px; /* 顶部间距 */
}
</style>